<!--
 * @Description:用户邀请记录列表单项，及 充值记录列表单项
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-12 15:10:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-5-12 18:41:00
-->
<template>
	<view class="user-list-item" @click="listClick">
		<!-- 图片展示 -->
		<!-- #ifndef APP-NVUE -->
		<view :class="`${liveStatus?'lives':''} border`" @click.stop="userAvatarClicl">
			<imageForSize style=" width: 100rpx;height: 100rpx" :radius="radius" :src="src" mode="">
			</imageForSize>
		</view>
		<!-- #endif  -->
		<!-- #ifdef APP-NVUE -->
		<view :class="`${liveStatus?'lives':''} border`" @click.stop="userAvatarClicl">
			<image :src="src" :style="`width: 100rpx;height: 100rpx;border-radius:${radius+'rpx'}`"></image>
		</view>
		<!-- #endif  -->
		<view :class="`avatar ${line ? 'hasLine':''}`" style="height: 100rpx;">
			<view class="">
				<view class="name-time">
					<h2>{{name}}</h2>
					<p v-if="typeof time=='string'">
						{{time}}
					</p>
					<p v-else>
						{{publicJS.timeZoneSwitching(time,"DD/MM/YYYY")}}
					</p>
				</view>
				<view class="money" v-if="money">
					${{money}}
				</view>
				<slot name="btn" v-else></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "listItem",
		props: {
			'time': {},
			'name': {},
			'money': {},
			'src': {},
			// 是否需要下划线
			line: {
				default: false,
				type: Boolean
			},
			// 圆角
			radius: {
				default: '100',
				type: String
			},
			// 直播状态
			liveStatus: {
				default: false,
				type: Boolean | String
			}
		},
		data() {
			return {

			};
		},
		methods: {
			//点击list框
			listClick() {
				this.$emit('listClick')
			},
			// 用户头像点击
			userAvatarClicl() {
				this.$emit('avatarClick', this.data)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.user-list-item {
		display: flex;
		justify-content: space-between;
		flex-direction: row;

		// &:first-child {
		// 	margin-top: 58rpx;
		// }
		.border{
			height: fit-content;
			border-radius: 50%;
			border: 4rpx solid transparent;
			padding: 2rpx;
		}
		.lives {
			border-color: #474ed0;
		}

		.avatar {
			display: flex;
			align-items: center !important;
			flex: auto;
			margin-left: 30rpx;

			&.hasLine {
				box-sizing: content-box;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #F2F3F5;
			}

			>view {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.name-time {
				flex: auto;
				width: 0;

				h2 {
					color: #0A1F44;
					font-size: 34rpx;
					font-weight: 400;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				p {
					width: 100%;
					color: #999CAD;
					font-size: 24rpx;
					white-space: nowrap !important;
					text-overflow: ellipsis !important;
					overflow: hidden !important;
				}
			}
		}
	}
</style>